<template>


    <div class="info">
        <h1>{{name}}</h1>

        <button @click="back">后退一页</button>
        <button @click="home">去首页</button>
        <button @click="go">前进一页</button>
    </div>


</template>
<script>
export default {
    name:"lyy1",
    data(){
        return{
            name:"Hi, my name is liyy page1!"
        }
    },
    beforeRouteEnter:(to, from, next)=> {
      //does NOT have access to `this` component instance}
        console.log(to);
        console.log('进入 to');
        next();
    },
    beforeRouteLeave:(to,from,next)=>{
      console.log(from);
      console.log('离开');
      next(); //不要忘记next()
      //leave 不能使用next({path:'/'});
    },methods:{
      go:function(){
        this.$router.go(1);
      },
      back:function(){
        this.$router.go(-1);
      },
      home:function(){
        this.$router.push('/');
      }
    }
}
</script>
<style scoped>
    .info{
        color:blue;
    }

</style>
